<template>
	<el-container>
		<el-container>
			<el-header class="header-tabs">
				<el-tabs type="card" v-model="status" @tab-change="tabChange">
					<el-tab-pane label="全部" name=""></el-tab-pane>
					<el-tab-pane v-for="(item,index) in task_status" :key="index" :label="item.name" :name="Number(item.value)"></el-tab-pane>
					<el-tab-pane label="抄送我的" :name="-10"></el-tab-pane>
				</el-tabs>
			</el-header>
			<el-header>
				<div class="left-panel">
					<!--导出-->
					<sc-export-button :auth="'task.export'" :apiObj="apiObj" :search="search" :parame="params"></sc-export-button>
				</div>
				<div class="right-panel">
					<div class="right-panel-search">
						<el-input v-model="search.title" placeholder="任务名称" clearable @keyup.enter="upsearch"></el-input>
						<el-date-picker type="date" placeholder="任务添加日期" v-model="search.create_time"></el-date-picker>
						<el-date-picker type="date" placeholder="任务要求完成日期" v-model="search.complete_date"></el-date-picker>
<!--						<el-select v-model="search.status" placeholder="选择任务状态" clearable filterable v-if="!groupId">-->
<!--							<el-option v-for="item in task_status" :key="item.value" :label="item.name" :value="Number(item.value)"/>-->
<!--						</el-select>-->
						<el-select v-model="search.level" placeholder="选择紧急状态" filterable clearable>
							<el-option label="延迟" :value="3"/>
							<el-option label="正常" :value="2"/>
							<el-option label="加急" :value="1"/>
						</el-select>
						<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
						<el-button type="primary" @click="unsetSearch">{{$t('all.reset')}}</el-button>
					</div>
				</div>
			</el-header>
			<el-main class="nopadding">
				<scTable ref="table" :apiObj="apiObj" :params="params" @selection-change="selectionChange" stripe remoteSort remoteFilter>
					<el-table-column type="selection" width="50" align="center"></el-table-column>
					<el-table-column :label="$t('all.sort')" type="index" width="50" align="center"></el-table-column>
					<el-table-column label="任务编号" prop="task_no"></el-table-column>
					<el-table-column label="任务名称" prop="title"></el-table-column>
					<el-table-column label="任务执行人" prop="executor_staff_name"></el-table-column>
					<el-table-column label="任务抄送人" prop="send_staff_name"></el-table-column>
					<el-table-column label="任务添加时间" prop="create_time"></el-table-column>
					<el-table-column label="任务要求完成时间" prop="complete_date"></el-table-column>
					<el-table-column label="任务状态" prop="status" width="120">
						<template #default="scope">
							<div>
								<el-tag v-if="scope.row.status==0">{{ scope.row.status_text }}</el-tag>
								<el-tag v-if="scope.row.status==1" type="warning">{{ scope.row.status_text }}</el-tag>
								<el-tag v-if="scope.row.status==2" type="success">{{ scope.row.status_text }}</el-tag>
								<el-tag v-if="scope.row.status==3" type="info">{{ scope.row.status_text }}</el-tag>
								<el-tag v-if="scope.row.status==-1" type="danger">{{ scope.row.status_text }}</el-tag>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="紧急状态" prop="level" width="120">
						<template #default="scope">
							<div>
								<el-tag v-if="scope.row.level==2" type="success">{{ scope.row.level_text }}</el-tag>
								<el-tag v-if="scope.row.level==3" type="danger">{{ scope.row.level_text }}</el-tag>
								<el-tag v-if="scope.row.level==1" type="warning">{{ scope.row.level_text }}</el-tag>
							</div>
						</template>
					</el-table-column>
					<el-table-column :label="$t('all.status')" prop="system_disable" width="80">
						<template #default="scope">
							<el-tag v-if="scope.row.system_disable==0" type="success">{{$t('all.enable')}}</el-tag>
							<el-tag v-if="scope.row.system_disable==1" type="danger">{{$t('all.disable')}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column :label="$t('all.operate')" fixed="right" align="center" width="180">
						<template #default="scope">
							<el-button-group>
								<el-button text type="primary" size="small"  v-if="scope.row.status!=3"
								           @click="table_staff(scope.row, scope.$index)" v-auth="'workbench.staff'">转给同事</el-button>
								<el-button text type="primary" size="small"  v-if="scope.row.status!=3"
								           @click="table_collaboration(scope.row, scope.$index)" v-auth="'workbench.collaboration'">添加协作人</el-button>
								<el-button text type="primary" size="small" @click="table_record(scope.row, scope.$index)" v-auth="'workbench.follow'">跟进</el-button>
								<el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)" v-auth="'workbench.show'">{{$t('all.show')}}</el-button>
							</el-button-group>
						</template>
					</el-table-column>

				</scTable>
			</el-main>
		</el-container>
	</el-container>

	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false"></save-dialog>
	<record-dialog v-if="dialog.record" ref="recordDialog" @success="handleSuccess" @closed="dialog.record = false"></record-dialog>
	<workmate v-if="dialog.workmate" ref="workmateDialog" @success="handleSuccess" @closed="dialog.workmate = false"></workmate>
	<collaboration v-if="dialog.collaboration" ref="collaborationDialog" @success="handleSuccess" @closed="dialog.collaboration = false"></collaboration>
</template>

<script>
import saveDialog from '@/views/task/save'
import recordDialog from '@/views/task/record.vue'
import collaboration from "@/views/task/collaboration.vue";
import workmate from "@/views/task/workmate.vue";
export default {
	name: '任务管理（列表）',
	components: {
		workmate,
		collaboration,
		saveDialog,
		recordDialog
	},
	data() {
		return {
			dialog: {
				save: false,
				record:false,
				workmate:false,
				collaboration:false
			},
			apiObj: this.$API.task.list,
			selection: [],
			search: {
				title: null,
				complete_date: null,
				level: null,
			},
			task_status:[],
			status:'',
			params:{
				is_self:1
			}
		}
	},
	watch: {

	},
	mounted() {
		this.getContract()
	},
	methods: {
		/**添加协作人*/
		table_collaboration(row) {
			this.dialog.collaboration = true
			this.$nextTick(() => {
				this.$refs.collaborationDialog.open('add').setData(row)
			})
		},
		/**转给同事点击*/
		table_staff(row) {
			this.dialog.workmate = true
			this.$nextTick(() => {
				this.$refs.workmateDialog.open('add').setData(row)
			})
		},
		/**顶部导航点击*/
		tabChange() {
			this.upsearch()
		},
		/**获取数据字典*/
		async getContract() {
			var res = await this.$API.common.getDictData.get({
				type: 'task_status'
			});
			this.task_status = res.data.task_status
		},
		/**跟进点击*/
		table_record(row) {
			this.dialog.record = true
			this.$nextTick(() => {
				this.$refs.recordDialog.open('add').setData(row)
			})
		},
		//查看
		table_show(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('show').setData(row)
			})
		},

		//删除
		async table_del(row) {
			var reqData = { id: row.id }
			var res = await this.$API.task.delete.post(reqData);
			if (res.code == 1) {
				//这里选择刷新整个表格 OR 插入/编辑现有表格数据
				this.$refs.table.refresh()
				this.$message.success(this.$t('all.delYes'))
			} else {
				this.$alert(res.message, this.$t('all.prompt'), {type: 'error'})
			}
		},
		async table_del_all(delete_ids) {
			var reqData = { id: delete_ids }
			var res = await this.$API.task.delete.post(reqData);
			if (res.code == 1) {
				this.$refs.table.refresh()
				this.$message.success(this.$t('all.delYes'))
			} else {
				this.$alert(res.message, this.$t('all.prompt'), {type: 'error'})
			}
		},
		//批量删除
		async batch_del() {
			var delete_ids = [];
			this.selection.forEach((item) => {
				delete_ids.push(item.id)
			})
			this.$confirm(`确定批量删除选中的 ${this.selection.length}${this.$t('all.term')}`, this.$t('all.prompt'), {
				type: 'warning'
			}).then(() => {
				this.table_del_all(delete_ids)
			}).catch(() => {

			})
		},

		//表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection;
		},
		//搜索
		upsearch() {
			this.$refs.table.upData({...this.search,status:this.status})
		},
		unsetSearch() {
			Object.keys(this.search).forEach(key => {
				this.search[key] = null;
			});
			this.upsearch()
		},
		//本地更新数据
		handleSuccess() {
			this.$refs.table.refresh()
		}
	}
}
</script>

<style></style>
